 <template>
	<view class="content">
		<!-- 顶部tab栏 -->
		<view class="nav_bar">
			<view class="nav_item" v-for="item in navList" :key="item.id">
				<text :class="currentIndex == item.id? 'isShowNav' : ''" @click="btnNav(item.id)">{{item.text}}</text>
			</view>
			 
		</view>
		<!-- 下方时间折叠列表 -->
		<view class="selection">
			<!-- 时间选择 -->
			<view class="selection_item"> 
				<!-- <ms-dropdown-menu class="ms-dropdown-menu">
					<ms-dropdown-item v-model="item" :list="itemList"></ms-dropdown-item>  
				</ms-dropdown-menu> -->
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" fields="month" class="picker">
					<view class="timePicker" >
						<view class="dataNum">{{date}}</view>
						<image :src="imgUrl+'/static/wap/img/down@2x.png'" mode="" class="timeImgJt"></image>
					</view>
				</picker>
			</view>
			
			<text class="selection_txt">
				合计充值：{{total||0}}元
			</text>
		</view>
		<!-- 缴费列表 -->
		<view class="pay_list">
			<view class="pay_item" v-for="(v,n) in dataList" @click="payDetails(v)"> 
				<view > 
					<image :src="imageList[v.feeType].src"></image>
					<text class="item_tit1">{{imageList[v.feeType].tittle}}</text>
					<text class="item_tit2">{{v.paymentMoney}}元</text>
				</view>
				<view>
					<text>{{v.create_time}}</text>
					<!-- <text>2020.03.02 12:25</text> -->
					<text>查看详情</text>
				</view>  
			</view>
<!-- 
			<view class="pay_item" @click="payDetails">
				<view>
					<image :src="imgUrl+'/static/wap/img/dian@2x.png'"></image>
					<text class="item_tit1">电费缴纳</text>
					<text class="item_tit2">25元</text>
				</view>
				<view>
					<text>2020.03.02 12:25</text>
					<text>查看详情</text>
				</view>
			</view>

			<view class="pay_item" @click="payDetails">
				<view>
					<image :src="imgUrl+'/static/wap/img/wu@2x.png'"></image>
					<text class="item_tit1">物业费缴纳</text>
					<text class="item_tit2">25元</text>
				</view>
				<view>
					<text>2020.03.02 12:25</text>
					<text>查看详情</text>
				</view>
			</view> -->
		</view>
		<uLi-load-more v-if="dataList.length>=5" :status="loadingType" :contentText="contentText" ></uLi-load-more>
	</view>
</template>

<script>
	import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
	import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
	import uLiLoadMore from "@/components/uLi-load-more/uLi-load-more.vue"
	import util from '../../static/util.js'
	export default {
		components: {
			msDropdownMenu,
			msDropdownItem,
			uLiLoadMore
		},
		data() {
			return {
				imgUrl:util.globalData.imgPre,
				loadingText: '加载中...',
				loadingType: 'more',//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				contentText: {
				       contentdown:'上拉显示更多',
				       contentrefresh: '正在加载...',
				       contentnomore: '没有更多数据了',
				 },
				navList:[
					{text:'全部', id: 1},
					{text:'水费', id: 2},
					{text:'电费', id: 3},
					{text:'物业费', id: 4},
				],
				imageList:[
					{},
					{
						tittle:'电费缴纳',
						src:"https://nengyuan.chuangxiangdianli.com/static/wap/img/dian@2x.png"
					},
					{
						tittle:'水费缴纳',
						src:"https://nengyuan.chuangxiangdianli.com/static/wap/img/shui@2x.png"
					},
					{
						tittle:'物业费缴纳',
						src:"https://nengyuan.chuangxiangdianli.com/static/wap/img/wu@2x.png"
					}
					
				],
				itemList:[
					{text: '2020 02',value: 0},
					{text: '2020 03',value: 1},
					{text: '2020 04',value: 2},
					{text: '2020 05',value: 3},
				],
				item: 0,
				//当前下标
				currentIndex: 1,
				startDate: '',
				endDate: '',
				date:'',
				pageNo:1,
				formDate:'',
				total:'',
				dataList: []
			};
		},
		onLoad(){
			 this.getTime()
			 this.getList()
		},
		methods:{
			btnNav(id){ 
				if(this.currentIndex == id ){
					return
				}
				this.currentIndex = id 
				this.pageNo=1
				this.getList()
			},
			getList(){ 
				let that = this
				var feeType=""
				switch (that.currentIndex){
					case 1:feeType=""
						break;
					case 2:feeType=2
						break;
					case 3:feeType=1
						break;
					case 4:feeType=3
						break;
					default:
						break;
				}
				that.ajax({
					url:'/api/bill/payBillList',
					data:{
						feeType:feeType,
						limit:5,
						page:that.pageNo,
						date_time:that.formDate
					},
					success:function(res){ 
						that.dataList = res.data.list    
						that.total=res.data.total
						if(that.pageNo==1){
							that.dataList=res.data.list 
						} 
						if(that.pageNo>1){ 
							if(res.data.list.length>0){
								that.dataList=that.dataList.concat(res.data.list)
								_self.loadingType = 'more';//将loadingType归0重置
								uni.hideNavigationBarLoading();//关闭加载动画
							}else{  
								_self.loadingType = 'noMore';//将loadingType归0重置
								uni.hideNavigationBarLoading();//关闭加载动画
							}
						}
					}
				  })
			},
			payDetails(v){
				uni.navigateTo({
					url:'../payDetails/payDetails?type=list&id='+v.id
				})
			},
			bindDateChange: function(e) { 
			      this.date = e.target.value
				  var arr=e.target.value.split('-')
				  var str=arr[0]+'.'+arr[1]
				 this.formDate=str
				 this.pageNo=1
				 this.getList()
			},
			getTime:function(){
				var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; 
				this.date=year + '-' + month
				this.formDate=year+'.'+month 
				return timer;
			},
		}
	}
</script>

<style lang="less">
	.content {
		height: 100vh;
		color: #333;
		background-color: #F7F7F8;
	}
	.picker{
		width: 300rpx;
	}
	.timePicker{
		display: flex;
		padding-top: 10rpx;
	}
	.timeImgJt{
		width: 30rpx;
		height: 30rpx;
		padding-left: 20rpx;
		padding-top: 30rpx;
	}
	.dataNum{
		color: #666666;
		font-size: 30rpx;
	}
	.nav_bar {
		margin-top: 6rpx;
		display: flex;
		font-size: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		border-top: 6rpx solid #F7F7F8;
		.nav_item {
			
			width: 25%;
			text-align: center;
			text {
				display: block;
				cursor:pointer;
				// border-bottom: 10rpx solid #2aabad; 
			}
		}
	}
	// 时间选择
	.selection {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 90rpx;
		line-height: 90rpx;
		.selection_item {
			height: 90rpx;
			color: #666;
			font-size: 28rpx; 
			display: flex;
			justify-content: space-between;
			.ms-dropdown-menu{
				margin-top: 10rpx;
				height: 70rpx;
				line-height: 12rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}
		}
		.selection_txt {
			color: #F99600;
			font-size: 30rpx;
		}
	}
	// 缴费列表
	.pay_list {
		.pay_item {
			padding: 14rpx 34rpx 0 34rpx;
			margin-bottom: 20rpx;
			height: 170rpx;
			font-size: 30rpx;
			letter-spacing: 2rpx;
			background-color: #fff;
			& view:nth-child(1) {
				height: 80rpx;
				image {
					margin-right: 33rpx;
					width: 80rpx;
					height: 80rpx;
					vertical-align: middle;
				}
				.item_tit2 {
					float: right;
					font-size: 36rpx;
					color: #F99600;
					line-height: 80rpx;
				}
			}
			& view:nth-child(2) {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				font-size: 30rpx;
				color: #999;
			}
		}
	}  
</style>